/* ==================
          边框 line为伪元素
 ==================== */

.border-red::after {
    border-color: var(--red);
}

.border-orange::after {
    border-color: var(--orange);
}

.border-yellow::after {
    border-color: var(--yellow);
}

.border-olive::after {
    border-color: var(--olive);
}

.border-green::after {
    border-color: var(--green);
}

.border-darkgreen::after {
    border-color: var(--darkgreen);
}

.border-cyan::after {
    border-color: var(--cyan);
}

.border-blue::after {
    border-color: var(--blue);
}

.border-purple::after {
    border-color: var(--purple);
}

.border-mauve::after {
    border-color: var(--mauve);
}

.border-pink::after {
    border-color: var(--pink);
}

.border-brown::after {
    border-color: var(--brown);
}

.border-grey::after {
    border-color: var(--grey);
}

.border-gray::after {
    border-color: var(--gray);
}

.border-black::after {
    border-color: var(--black);
}

.border-white::after {
    border-color: var(--white);
}

/* ==================
          边框
 ==================== */

/* -- 实线 -- */

.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left,
.solid-bold,
.solid-bold-top,
.solid-bold-right,
.solid-bold-bottom,
.solid-bold-left {
    position: relative;
}

.solid::after,
.solid-top::after,
.solid-right::after,
.solid-bottom::after,
.solid-left::after,
.solid-bold::after,
.solid-bold-top::after,
.solid-bold-right::after,
.solid-bold-bottom::after,
.solid-bold-left::after {
    content: ' ';
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
}

.solid::after {
    border: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-top::after {
    border-top: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-right::after {
    border-right: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-bottom::after {
    border-bottom: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-left::after {
    border-left: 4rpx solid rgba(0, 0, 0, 0.1);
}

.solid-bold::after {
    border: 8rpx solid #eee;
}

.solid-bold-top::after {
    border-top: 8rpx solid #eee;
}

.solid-bold-right::after {
    border-right: 8rpx solid #eee;
}

.solid-bold-bottom::after {
    border-bottom: 8rpx solid #eee;
}

.solid-bold-left::after {
    border-left: 8rpx solid #eee;
}
